<!doctype html>
<html lang="en" translate="no">
  <head>
    <meta charset="UTF-8" />

    <link
      rel="icon"
      type="image/x-icon"
      href="/images/icons/android/android-launchericon-48-48.png"
      data-rh="true"
    />
    <link rel="apple-touch-icon" href="/images/icons/ios/192.png" />
    <link rel="manifest" href="/manifest.json" />

    <meta name="theme-color" content="#000000" />
    <meta name="description" content="A modern open-source CRM" />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
    />
    <meta property="og:description" content="A modern open-source CRM" />
    <meta property="og:title" content="Twenty" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:image"
      content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
    />

    <meta name="twitter:description" content="A modern open-source CRM" />
    <meta name="twitter:title" content="Twenty" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
    />

    <title>Twenty</title>
    <!-- BEGIN: Twenty Config -->
    <script id="twenty-env-config">
      window._env_ = {
        // This will be overwritten
      };
    </script>
    <!-- END: Twenty Config -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module">
      const disableInputAutoZoom = () => {
        const viewportMetadata = document.querySelector('meta[name=viewport]');

        if (viewportMetadata !== null) {
          viewportMetadata.setAttribute(
            'content',
            'width=device-width, initial-scale=1.0, maximum-scale=1.0',
          );
        }
      };

      const isIOS = /iPad|iPhone/.test(navigator.userAgent);
      if (isIOS) {
        disableInputAutoZoom();
      }
    </script>
    <style>
      :root {
        /* THEME_DARK.background.tertiary */
        --theme-dark-background-tertiary: #1d1d1d;
        /* THEME_LIGHT.background.tertiary */
        --theme-light-background-tertiary: #f1f1f1;
      }

      @media (prefers-color-scheme: dark) {
        html, body {
          background-color: var(--theme-dark-background-tertiary);
        }
      }

      @media (prefers-color-scheme: light) {
        html, body {
          background-color: var(--theme-light-background-tertiary);
        }
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>
